To Do List

功能說明

1. 在list中新增項目
   
2. 編輯已新增之項目
   
3. 刪除list中的項目
   
4. 清空list
   

HTML重點

<section class="section-center">
    <!-- form -->
    <form class="grocery-form">
    
        <!-- 警告訊息 -->
        <p class="alert"></p>
        
        <!-- 標題 -->
        <h3>grocery bud</h3>
        
        <!-- 搜尋欄 -->
        <div class="form-control">
        
            <!-- 輸入方格 -->
            <input type="text" id="grocery" placeholder="e.g. eggs" />
            
            <!-- 輸入按鈕 -->
            <button type="submit" class="submit-btn">submit</button>
        </div>
    </form>
    
    <!-- list區域 -->
    <div class="grocery-container">
    
        <!-- 項目list -->
        <div class="grocery-list"></div>
        
        <!-- 清空list按鈕 -->
        <button class="clear-btn">clear items</button>
    </div>
    
</section>